<template>
    <div id="list">
      <div v-for="(item, index) in listData" :key="index" class="item">
          <div class="font-icon">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="item.icon"></use>
            </svg>
          </div>
        <div class="info">{{item.info}}</div>
      </div>
    </div>
</template>

<script>
 export default {
  name: "ListView",
    props: {
    listData: {
      type: Array,
        default: function () {
          return []
        }
      }
    }
 }
</script>

<style scoped>
  #list {
    background-color: #fff;
    font-size: 15px;
    color: #333;
  }

  #list .item {
    display: flex;
    position: relative;
    height: 44px;
    line-height: 44px;
  }
  .font-icon {
    position: absolute;
    left: 10px;
    top: -2px;
  }
  .font-icon .icon {
    width: 25px;
    height: 20px;
    vertical-align: middle;
  }
  .item .info {
      flex: 1;
      margin-left: 40px;
      border-bottom: 1px solid rgba(100, 100, 100, .1);
      padding-left: 5px;
    }
  
    .item:last-of-type .info {
      border-bottom: none;
    }
  </style>